---
title: 'previewHead'
sidebar:
  order: 17
  title: previewHead
---

Parent: [main.js|ts configuration](./main-config.mdx)

Type: `(head: string) => string`

Programmatically adjust the [preview `<head>`](../../configure/story-rendering.mdx#adding-to-head) of your Storybook. Most often used by [addon authors](../../addons/writing-presets.mdx#ui-configuration).

<Callout variant="info" icon="💡">
  If you don't need to programmatically adjust the preview head, you can add scripts and styles to [`preview-head.html`](../../configure/story-rendering.mdx#adding-to-head) instead.
</Callout>

For example, you can conditionally add scripts or styles, depending on the environment:

{/* prettier-ignore-start */}

<CodeSnippets path="main-config-preview-head.md" />

{/* prettier-ignore-end */}
